<template>
    <div class="typerightlist">
        <div class="header">
            <div v-for="( item , i ) of bottomlist.sortFilter" :key="'sort'+i"  @click="getAll(item.title,{'fcid':bottomlist.param.fcid,'sort':item.sortKey})" :class="selltype.str==item.title?'list_active':''">
                <span>{{ item.title }}</span>
            </div>
        </div>
        <div class="content">
            <TypeRightListContent :content="bottom" ></TypeRightListContent>
        </div>
    </div>
</template>

<script>

import TypeRightListContent from "./TypeRightListContent";
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";


export default {
    data() {
        return {};
    },
    props:{
        bottom:null,
        bottomlist:null,
        tget:null
    },
    computed:{
        ...mapState(['selltype'])
    },
    components: {
        TypeRightListContent
    },
    methods:{
        getAll(data,result){
            this.changeListStyle(data);
            this.TypeRightListClass(result);
        },
        ...mapActions(['TypeRightListClass']),
        ...mapActions(['changeListStyle']),
    }
};
</script>

<style lang='less' scoped>
    .typerightlist{
        width:100%;
        margin-top:50px;
        .header{
            display: flex;
            div{
                width:33%;
                border-right:1px solid #ccc;
                text-align: center;
            }
        }
        .content{
           
        }
    }
    .list_active{
        color:#FF5577;
    }
</style>
